<template>
  <div class="container">
    <header>
      <h1>搜索引擎</h1>
    </header>
    <div class="vertical-bar"></div>
    <div id="left-content">

      <h2 id="hot-search-title" style="color: #d63031;margin-left: 15%;margin-top: 10%"></h2>
<!--      <ul id="hot-search-list">-->
<!--        <li v-for="result in hot_searchQuery" :key="result.id" @click="Display(result.seed_word)">-->
<!--               <a style="color: black">{{ result.seed_word }}  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-->
<!--                <svg t="1701792424031" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2398" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M870.4 649.309091c0-9.309091 2.327273-20.945455 2.327273-27.927273 0-76.8-25.6-151.272727-72.145455-214.109091l-2.327273-2.327272-2.327272-2.327273c-4.654545-4.654545-6.981818-6.981818-11.636364-6.981818-2.327273-2.327273-6.981818-2.327273-11.636364-2.327273s-6.981818 0-9.30909 2.327273h-2.327273c-2.327273 0-4.654545 2.327273-6.981818 4.654545-23.272727-46.545455-62.836364-97.745455-88.436364-118.690909-34.909091-32.581818-93.090909-100.072727-93.090909-195.490909v-6.981818c2.327273-13.963636-4.654545-27.927273-16.290909-34.909091-11.636364-6.981818-25.6-6.981818-37.236364 0-69.818182 48.872727-118.690909 118.690909-141.963636 200.145454-4.654545 13.963636-6.981818 30.254545-9.309091 44.218182-6.981818-9.309091-16.290909-16.290909-23.272727-25.6-13.963636-11.636364-25.6-23.272727-39.563637-32.581818-6.981818 2.327273-6.981818 2.327273-9.309091 2.327273-11.636364-6.981818-25.6-6.981818-37.236363 0s-18.618182 20.945455-16.290909 32.581818c0 11.636364 2.327273 23.272727 2.327272 32.581818v23.272727c-2.327273 30.254545-6.981818 62.836364-20.945454 88.436364l-13.963637 20.945455c-9.309091 16.290909-20.945455 32.581818-27.927272 51.2-11.636364 27.927273-20.945455 58.181818-25.6 88.436363-2.327273 16.290909-4.654545 34.909091-4.654546 53.527273 0 76.8 23.272727 151.272727 69.818182 214.109091 67.490909 93.090909 176.872727 146.618182 290.909091 146.618182 186.181818-2.327273 344.436364-146.618182 358.4-335.127273 0 2.327273 0 2.327273 0 0 0 2.327273 0 2.327273 0 0 0 2.327273 0 2.327273 0 0zM512 912.290909c-93.090909 0-179.2-44.218182-235.054545-118.690909-37.236364-51.2-55.854545-109.381818-55.854546-172.218182 0-13.963636 0-30.254545 2.327273-44.218182 4.654545-25.6 11.636364-48.872727 20.945454-72.145454 6.981818-13.963636 13.963636-27.927273 23.272728-41.890909 4.654545-6.981818 9.309091-16.290909 13.963636-23.272728 18.618182-32.581818 25.6-69.818182 27.927273-104.727272 4.654545 6.981818 11.636364 13.963636 16.290909 18.618182 20.945455 27.927273 32.581818 51.2 39.563636 67.490909 4.654545 11.636364 9.309091 18.618182 13.963637 23.272727 11.636364 13.963636 30.254545 16.290909 44.218181 6.981818 13.963636-9.309091 20.945455-27.927273 13.963637-44.218182 0 0-9.309091-20.945455-9.309091-67.490909v-23.272727c2.327273-18.618182 4.654545-37.236364 9.309091-55.854546 11.636364-44.218182 34.909091-83.781818 65.163636-118.690909 13.963636 69.818182 51.2 132.654545 109.381818 186.181819 34.909091 32.581818 83.781818 107.054545 86.109091 134.981818 2.327273 13.963636 9.309091 23.272727 20.945455 27.927272 11.636364 4.654545 25.6 2.327273 34.909091-4.654545l6.981818-6.981818c23.272727 41.890909 34.909091 88.436364 34.909091 137.309091v20.945454C791.272727 795.927273 663.272727 912.290909 512 912.290909z m197.818182-290.909091c0 109.381818-88.436364 197.818182-197.818182 197.818182s-197.818182-88.436364-197.818182-197.818182c0-18.618182 16.290909-34.909091 34.909091-34.909091s34.909091 16.290909 34.909091 34.909091c0 69.818182 58.181818 128 128 128s128-58.181818 128-128c0-18.618182 16.290909-34.909091 34.909091-34.909091s34.909091 16.290909 34.909091 34.909091z" fill="#d63031" p-id="2399"></path></svg>-->
<!--                {{ result.heat }}</a>-->
<!--        </li>-->
<!--      </ul>-->
      <el-container style="margin-left: 15%">
      <el-card id="hot-search-list" class="box-card">
<!--        <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div>-->
        <div v-for="result in hot_searchQuery" :key="result.id" @click="Display(result.seed_word)">
          <a >{{ result.seed_word }}  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <svg t="1701792424031" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2398" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M870.4 649.309091c0-9.309091 2.327273-20.945455 2.327273-27.927273 0-76.8-25.6-151.272727-72.145455-214.109091l-2.327273-2.327272-2.327272-2.327273c-4.654545-4.654545-6.981818-6.981818-11.636364-6.981818-2.327273-2.327273-6.981818-2.327273-11.636364-2.327273s-6.981818 0-9.30909 2.327273h-2.327273c-2.327273 0-4.654545 2.327273-6.981818 4.654545-23.272727-46.545455-62.836364-97.745455-88.436364-118.690909-34.909091-32.581818-93.090909-100.072727-93.090909-195.490909v-6.981818c2.327273-13.963636-4.654545-27.927273-16.290909-34.909091-11.636364-6.981818-25.6-6.981818-37.236364 0-69.818182 48.872727-118.690909 118.690909-141.963636 200.145454-4.654545 13.963636-6.981818 30.254545-9.309091 44.218182-6.981818-9.309091-16.290909-16.290909-23.272727-25.6-13.963636-11.636364-25.6-23.272727-39.563637-32.581818-6.981818 2.327273-6.981818 2.327273-9.309091 2.327273-11.636364-6.981818-25.6-6.981818-37.236363 0s-18.618182 20.945455-16.290909 32.581818c0 11.636364 2.327273 23.272727 2.327272 32.581818v23.272727c-2.327273 30.254545-6.981818 62.836364-20.945454 88.436364l-13.963637 20.945455c-9.309091 16.290909-20.945455 32.581818-27.927272 51.2-11.636364 27.927273-20.945455 58.181818-25.6 88.436363-2.327273 16.290909-4.654545 34.909091-4.654546 53.527273 0 76.8 23.272727 151.272727 69.818182 214.109091 67.490909 93.090909 176.872727 146.618182 290.909091 146.618182 186.181818-2.327273 344.436364-146.618182 358.4-335.127273 0 2.327273 0 2.327273 0 0 0 2.327273 0 2.327273 0 0 0 2.327273 0 2.327273 0 0zM512 912.290909c-93.090909 0-179.2-44.218182-235.054545-118.690909-37.236364-51.2-55.854545-109.381818-55.854546-172.218182 0-13.963636 0-30.254545 2.327273-44.218182 4.654545-25.6 11.636364-48.872727 20.945454-72.145454 6.981818-13.963636 13.963636-27.927273 23.272728-41.890909 4.654545-6.981818 9.309091-16.290909 13.963636-23.272728 18.618182-32.581818 25.6-69.818182 27.927273-104.727272 4.654545 6.981818 11.636364 13.963636 16.290909 18.618182 20.945455 27.927273 32.581818 51.2 39.563636 67.490909 4.654545 11.636364 9.309091 18.618182 13.963637 23.272727 11.636364 13.963636 30.254545 16.290909 44.218181 6.981818 13.963636-9.309091 20.945455-27.927273 13.963637-44.218182 0 0-9.309091-20.945455-9.309091-67.490909v-23.272727c2.327273-18.618182 4.654545-37.236364 9.309091-55.854546 11.636364-44.218182 34.909091-83.781818 65.163636-118.690909 13.963636 69.818182 51.2 132.654545 109.381818 186.181819 34.909091 32.581818 83.781818 107.054545 86.109091 134.981818 2.327273 13.963636 9.309091 23.272727 20.945455 27.927272 11.636364 4.654545 25.6 2.327273 34.909091-4.654545l6.981818-6.981818c23.272727 41.890909 34.909091 88.436364 34.909091 137.309091v20.945454C791.272727 795.927273 663.272727 912.290909 512 912.290909z m197.818182-290.909091c0 109.381818-88.436364 197.818182-197.818182 197.818182s-197.818182-88.436364-197.818182-197.818182c0-18.618182 16.290909-34.909091 34.909091-34.909091s34.909091 16.290909 34.909091 34.909091c0 69.818182 58.181818 128 128 128s128-58.181818 128-128c0-18.618182 16.290909-34.909091 34.909091-34.909091s34.909091 16.290909 34.909091 34.909091z" fill="#d63031" p-id="2399"></path></svg>
            {{ result.heat }}</a>
        </div>
      </el-card>
      </el-container>
    </div>

      <div>
        <nav>
          <ul id="item">
            <li  style="background-color: transparent;padding-left: 17px;padding-right: 17px;" v-for="item in items" :key="item.id" :id="item.id" @click="changeColor(item.id)">{{ item.name }}</li>
          </ul>
        </nav>
      </div>

      <div class="search-box">
        <input type="text" id="input-box" v-model="searchQuery" placeholder="在这里输入搜索内容">
        <button @click="search(searchQuery)">搜索</button>
      </div>

    <div class="content">
      <div v-if="searchResults1.length > 0 ||searchResults2.length > 0 ||Records.length > 0 || searchResults3.length>0" class="search-results">
<!--        <h2 style="color: #181818">搜索结果</h2>-->
        <el-table height="550" width="700px" border class="table" v-if="displayedResults1.length > 0" :data="displayedResults1" stripe style="width: 100%">
          <el-table-column label="序号" align="center">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="word" label="word" align="center"/>
          <el-table-column prop="rank" label="rank" align="center"/>
          <el-table-column prop="recommend" label="recommend" align="center"/>
          <el-table-column label="score" align="center">
            <template #default="scope">
              <div v-if="HoverControl === scope.$index" @mouseleave="handleMouseLeave" class="temp">
                <el-button class="button_scores" text @click="giveFeedback(1, scope.$index)">
                  正合我意
                </el-button>
                <el-button class="button_scores" text @click="giveFeedback(-1, scope.$index)">
                  差点意思
                </el-button>
              </div>
              <el-button class="button_scores" v-else text :icon="Sort" @mouseover="handleMouseOver(scope.$index)">
                {{ getIsAppraise(scope.$index,1) ?  "已评价" : "给个评价吧" }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-table class="cell" v-if="displayedResults2.length > 0" :data="displayedResults2" stripe style="width: 100%">
          <el-table-column prop="word" label="word" width="180"/>
          <el-table-column label="score" width="220" align="center">
            <template #default="scope">
              <div v-if="HoverControl === scope.$index" @mouseleave="handleMouseLeave" class="temp">
                <el-button class="button_scores" text @click="giveFeedback1(1, scope.$index)">
                  正合我意
                </el-button>
                <el-button class="button_scores" text @click="giveFeedback1(-1, scope.$index)">
                  差点意思
                </el-button>
              </div>
              <el-button class="button_scores" v-else text :icon="Sort" @mouseover="handleMouseOver1(scope.$index)">
                {{ getIsAppraise(scope.$index,2)  ?  "已评价" : "给个评价吧" }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
          <el-table class="cell" v-if="displayedResults3.length > 0" :data="displayedResults3" stripe style="width: 100%">
<!--          <el-table-column prop="1" label="竞争关键词交集" width="180"/>-->
<!--          <el-table-column prop="4" label="搜索量对比" width="180"/>-->
<!--          <el-table-column prop="5" label="可能相关的种子关键字" width="180"/>-->
<!--              {{ displayedResults3 }}-->
              <div class="result1">

              </div>
        </el-table>
        <el-table class="cell" v-if="displayedRecords.length > 0" :data="displayedRecords" stripe style="width: 100%">
          <el-table-column prop="record" label="record" width="180"/>
          <el-table-column prop="time" label="time" width="180"/>
        </el-table>
        <div class="pagination">
          <button class="button_page" v-for="page in totalPages1" :key="page"
                  :class="{ current_page: currentPage1 === page }" @click="setCurrentPage1(page)">{{ page }}
          </button>
        </div>
        <div class="pagination">
          <button class="button_page" v-for="page in totalPages2" :key="page"
                  :class="{ current_page: currentPage2 === page }" @click="setCurrentPage2(page)">{{ page }}
          </button>
        </div>
        <div class="pagination">
          <button class="button_page" v-for="page in totalPages3" :key="page"
                  :class="{ current_page: currentPage3 === page }" @click="setCurrentPage3(page)">{{ page }}
          </button>
        </div>
<!--          <div class="pagination">-->
<!--          <button class="button_page" v-for="page in totalPages4" :key="page"-->
<!--                  :class="{ current_page: currentPage4 === page }" @click="setCurrentPage4(page)">{{ page }}-->
<!--          </button>-->
<!--        </div>-->
      </div>
    </div>
    <footer>
      <p>版权所有 © 2023 搜索引擎</p>
    </footer>

  </div>

</template>

<script>
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
import axios from "axios";
import {ref} from 'vue'

const radio1 = ref('0')
const value1 = ref(null)

export default {
  name: "Main",
  data() {
    return {
      tableData,
      value1,
      radio1,
      items: [
        {id: 'item1', name: '竞争关键字'},
        {id: 'item2', name: '相关关键字'},
        {id: 'item5', name: '关键字对比'},
        {id: 'item3', name: '用户搜索记录'}
      ],
      searchQuery: '',
      searchResults1: [],
      searchResults2: [],
      searchResults3: [],
      Records: [],
      hot_searchQuery: [],
      id: 'item1',
      currentPage1: 1,
      currentPage2: 1,
      currentPage3: 1,
      currentPage4: 1,
      pageSize: 10,
      HoverControl: -1,

    };
  },
  computed: {
    displayedResults1() {
      const startIndex = (this.currentPage1 - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.searchResults1.slice(startIndex, endIndex);
    },
    displayedResults2() {
      const startIndex = (this.currentPage2 - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.searchResults2.slice(startIndex, endIndex);
    },
    displayedResults3() {
      const startIndex = (this.currentPage4 - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.searchResults3.slice(startIndex, endIndex);
    },
    displayedRecords() {
      const startIndex = (this.currentPage3 - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.Records.slice(startIndex, endIndex);
    },
    totalPages1() {
      return Math.ceil(this.searchResults1.length / this.pageSize);
    },
    totalPages2() {
      return Math.ceil(this.searchResults2.length / this.pageSize);
    },
    totalPages3() {
      return Math.ceil(this.Records.length / this.pageSize);
    },
      totalPages4() {
      return Math.ceil(this.searchResults3.length / this.pageSize);
    },

  },
  methods: {
    search(searchQuery) {
      //取得输入的keyword和当前的itemid
      console.log(searchQuery);
      console.log(this.id)
      console.log(this.$route.params.username)
      //TODO：根据选择的itemid来选择后端处理函数，传入searchQuery作为keyword。后端处理结果传给searchResults
      if (this.id === 'item1') {
        axios.post(`http://localhost:5000/word/query_competitive`, {
          seed_word: this.searchQuery
        }, {
          "Content-Type": "application/json;charset=UTF-8",
        }).then(res => {
          if (res.data.status === "SUCCESS") {
            console.log(res.data);
            this.searchResults1 = res.data.result;
            this.tableData = res.data.result;
            axios.post(`http://localhost:5000/user/save_record`, {
              username: this.$route.params.username,
              keyword: this.searchQuery
            }, {
              "Content-Type": "application/json;charset=UTF-8",
            }).then(res => {
              console.log(res.data);
            }).catch(error => {
              console.log(error)
            })
          }
        }).catch(error => {
          console.log(error)
        })
      } else if (this.id === 'item2') {
        axios.post(`http://localhost:5000/word/query_intermediate`, {
          seed_word: this.searchQuery
        }, {
          "Content-Type": "application/json;charset=UTF-8",
        }).then(res => {
          if (res.data.status === "SUCCESS") {
            this.searchResults2 = res.data.result;
            axios.post(`http://localhost:5000/user/save_record`, {
              username: this.$route.params.username,
              keyword: this.searchQuery
            }, {
              "Content-Type": "application/json;charset=UTF-8",
            }).then(res => {
              console.log(res.data);
            }).catch(error => {
              console.log(error)
            })
          }
        }).catch(error => {
          console.log(error)
        })
      } else {
          //TODO:关键词对比
          const searchArray = this.searchQuery.split("，");
          axios.post(`http://localhost:5000/word/query_related`, {
          word1:searchArray[0],
          word2:searchArray[1]
        }, {
          "Content-Type": "application/json;charset=UTF-8",
        }).then(res => {
          if (res.data.status === "SUCCESS") {
              console.log(res.data.result)
            this.searchResults3 = res.data.result;
              console.log(this.searchResults3)
            const element = document.querySelector(".result1");
            element.textContent = this.searchResults3;
            axios.post(`http://localhost:5000/user/save_record`, {
              username: this.$route.params.username,
              keyword: searchArray[0]
            }, {
              "Content-Type": "application/json;charset=UTF-8",
            }).then(res => {
              console.log(res.data);
            }).catch(error => {
              console.log(error)
            })
          }
        }).catch(error => {
          console.log(error)
        })
      }

    },
    getIsAppraise(index,type) {
      if (type === 1)
        return this.searchResults1[index].isAppraise;
      else if (type === 2)
        return this.searchResults2[index].isAppraise;
    },
    handleMouseOver(index) {
      const flag = this.searchResults1[index].isAppraise;
      if (flag === true) {
        this.HoverControl = -1
      } else
        this.HoverControl = index
    },
    handleMouseOver1(index) {
      const flag = this.searchResults2[index].isAppraise;
      if (flag === true) {
        this.HoverControl = -1
      } else
        this.HoverControl = index
    },
    handleMouseLeave() {
      this.HoverControl = -1
    },
    changeColor(itemId) {
      this.id = itemId;
      // 重置所有li的颜色
      const lis = document.querySelectorAll('nav li');
      lis.forEach((li) => {
        li.style.backgroundColor = 'white';
        li.style.color = 'black';
      });
      // 更改点击的li的颜色
      const item = document.getElementById(itemId);
      item.style.backgroundColor = 'black';
      item.style.color = 'white';
      this.searchResults = [];
      const leftContent = document.getElementById('left-content');
      const searchBox = document.querySelector('.search-box');
      const content = document.querySelector('.content');
      const result = document.querySelector('.content');
      const hotBackground = document.querySelector('.vertical-bar');
      this.searchQuery = '';
      this.searchResults1 = [];
      this.searchResults2 = [];
      this.searchResults3 = [];
      this.Records = [];
      if (itemId !== 'item1') {
        leftContent.style.display = 'none';
        content.style.marginTop = "0px";
        result.style.marginLeft = "700px"
        hotBackground.style.display = 'none';
      } else {
        const hotSearchTitle = document.getElementById('hot-search-title');
        hotSearchTitle.textContent = '热搜关键词';
        hotBackground.style.display = 'block';
        axios.post(`http://localhost:5000/word/query_hot`, {
          "Content-Type": "application/json;charset=UTF-8",
        }).then(res => {
          this.hot_searchQuery = res.data.result;
        }).catch(error => {
          console.log(error)
        });
        // content.style.marginTop = "-280px";
        // content.style.marginTop = "-100px";
        leftContent.style.display = 'block';
        result.style.marginLeft = "500px"
      }
      if (itemId === 'item4' || itemId === 'item3') {
        searchBox.style.display = 'none';
      } else {
        searchBox.style.display = 'block';
      }
      if (this.id === 'item3') {
        axios.post(`http://localhost:5000/user/query_record`, {
          username: this.$route.params.username
        }, {
          "Content-Type": "application/json;charset=UTF-8",
        }).then(res => {
          this.Records = res.data.records;
        }).catch(error => {
          console.log(error)
        })
      }
    },
    Display(result) {
      const inputBox = document.getElementById('input-box');
      inputBox.value = result;
      this.searchQuery = result;
    },
    giveFeedback(score, index) {
      console.log(index)
      const word = this.searchResults1[index].word;
      console.log(word)
      axios.post(`http://localhost:5000/user/save_score`, {
        username: this.$route.params.username,
        seed_word: this.searchQuery,
        competitive_word: word,
        score: score
      }, {
        "Content-Type": "application/json;charset=UTF-8",
      }).then(res => {
        alert("打分成功！")
        this.searchResults1[index].isAppraise = !this.searchResults1[index].isAppraise
        console.log(res.data);
      }).catch(error => {
        console.log(error)
      })
    },
      giveFeedback1(score, index) {
      console.log(index)
      const word = this.searchResults2[index].word;
      console.log(word)
      axios.post(`http://localhost:5000/user/save_score`, {
        username: this.$route.params.username,
        seed_word: this.searchQuery,
        competitive_word: word,
        score: score
      }, {
        "Content-Type": "application/json;charset=UTF-8",
      }).then(res => {
        alert("打分成功！")
        this.searchResults2[index].isAppraise = !this.searchResults2[index].isAppraise
        console.log(res.data);
      }).catch(error => {
        console.log(error)
      })
    },
    setCurrentPage1(page) {
      this.currentPage1 = page;
    },
    setCurrentPage2(page) {
      this.currentPage2 = page;
    },
    setCurrentPage3(page) {
      this.currentPage3 = page;
    },
      setCurrentPage4(page) {
      this.currentPage4 = page;
    }
  }

};

</script>

<style scoped>
.container {
  width: 1280px;
  margin-top: 200px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  align-items: center;
  /*background-image: url(); */
}

header {
  text-align: center;
  margin-bottom: 10px;
}

h1 {
  font-size: 32px;
  color: #333;
}

li {
  list-style-type: none;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  margin-top: 10px;
}

nav li {
  margin-left: 10px;
}

nav a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
  background-color: #f1f1f1;
}

nav a:hover {
  background-color: #ccc;
}

#left-content {
  position: absolute;
  margin-left: -780px;
  width: 33.33%;
  float: left;

}


.content {

  width: 1100px;
  height: 100%;
  padding: 10px;
  //overflow-y: scroll;
  box-sizing: border-box;
}

.cell {
  text-align: left;
  color: #181818;
}

.search-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;

}

.vertical-bar {
  z-index: -1;
  position: absolute; /* 绝对定位 */
  left: 1%; /* 左边距离为 33.33% */
  width: 360px; /* 宽度可以根据需求调整 */
  height: 100vh; /* 100% 视口高度，使其沿着整个视口垂直延伸 */
  opacity: 0.5;
  /*background: linear-gradient(to top, #ff7979, #eb4d4b, #e55039, #eb2f06); !* 渐变颜色，可以设置起始和结束颜色 *!*/
  display: none;
}


input[type="text"] {
  flex: 1;
  padding: 10px;
  font-size: 16px;
  width: 400px;
  height: 50px;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #333;
  /*background-color: transparent;*/
  color: #fff;
  border: none;
  cursor: pointer;
  height: 50px;

}

.table {
  width: 100%;
  font-size: 14px;
}

.button_score {
  width: 80px;
  height: 35px;
  /*background-color: hsla(160, 100%, 37%, 1);*/
}
svg {
  width: 20px;
  height: 20px;
}
.temp {
  display: flex;
  justify-content: center;
  width: 80%;
  margin: 0 auto;
}

.button_page {
  background-color: transparent;
  color: #333;
}

.current_page {
  color: blue;
}
.button_scores{
    background-color: transparent;
    color: #181818;
}

.search-results {
  margin-top: 10px;
}

.search-results h2 {
  font-size: 24px;
  color: #333;
}

.search-results ul {
  list-style-type: none;
  padding: 0;
}

.search-results li {
  margin-bottom: 10px;
}

.search-results a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.search-results p {
  color: #666;
}

footer {
  text-align: center;
  margin-top: auto;
  color: #181818;
  padding: 20px 0;
}

.demo-rate-block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 49%;
  box-sizing: border-box;
}

.demo-rate-block:last-child {
  border-right: none;
}

.demo-rate-block .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
